<template>
  <div class="message">
    <div class="avatar">
      <img
        :src="state.avatar"
        style="
          width: 70px;
          height: 70px;
          border-radius: 30px;
          margin-left: 20px;
        "
      />
    </div>
    <div class="text">
      <h4>
        {{ state.nickname }}
      </h4>
      <h6>
        {{ state.latest }}
      </h6>
    </div>
    <div class="time">
      <h5>{{ state.time }}</h5>
    </div>
  </div>
</template>

<script>
import { reactive } from 'vue'
export default {
   setup() {
    //消息
    const state = reactive({
      avatar: "../../public/1.webp",
      latest: "你好啊",
      nickname: "李仙女",
      time: "2021-07-14 16:34:12",
    });
    return {
      state
    }
    }
};
</script>

<style scoped>
.message{
  width: 100%;
  height: 20%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  display: flex;
  margin-top: 5px;
}
.text{
  width: 50%;
  height: 20%;
}
.text h4 {
  margin: 10px 0 10px 20px;
}
.text h6{
  margin: 5px 0 10px 22px;
  color: #909399;
}
.time{
  color:#909399;
}
</style>